<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
	<title>有哥供应链两周年</title>
	<style type="text/css">
		body{
			background-color: #000000;
			position: absolute;
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
			margin: 0;
			padding: 0;
			overflow: auto;
		}
		#myCanvas, #fireworksCanvas{
			margin:0 auto;
			display: block;
			max-width: 100%;
			height: auto;
		}
		#fireworksCanvas {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 5;
			pointer-events: none;
		}
		#myCanvas {
			position: relative;
			z-index: 10;
		}
		#starsCanvas {
			position: fixed;
			top: 0;
			left: 0;
			width: 100vw;
			height: 100vh;
			display: block;
			z-index: 1;
			background: transparent;
		}
		
		/* 移动端优化 */
		@media screen and (max-width: 768px) {
			body {
				overflow: hidden; /* 防止移动端滚动 */
			}
			
			#myCanvas {
				width: 100vw !important;
				height: 100vh !important;
				max-width: none !important;
			}
			
			#fireworksCanvas {
				will-change: transform; /* 优化动画性能 */
			}
			
			#starsCanvas {
				will-change: transform; /* 优化动画性能 */
			}
		}
		
		@media screen and (max-width: 480px) {
			/* 小屏幕设备进一步优化 */
			body {
				touch-action: none; /* 防止滑动 */
			}
		}
		
		/* 移动端彩色文字效果 */
		#mobileTextContainer {
			position: fixed;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			text-align: center;
			z-index: 15;
			display: none; /* 默认隐藏，移动端显示 */
			font-family: 'Microsoft YaHei', 'PingFang SC', Arial, sans-serif;
			font-weight: 900;
			opacity: 0;
			animation: textFadeIn 0.8s ease-out 0s forwards;
		}
		
		.mobile-text-line {
			display: block;
			background: linear-gradient(45deg, 
				#ff6b35, #f7931e, #ffd700, #32cd32, #00bfff, #9370db, #ff69b4);
			background-size: 400% 400%;
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			background-clip: text;
			animation: rainbowFlow 3s ease-in-out infinite;
			text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
			margin: 0.2rem 0;
		}
		
		@keyframes textFadeIn {
			0% {
				opacity: 0;
				transform: translate(-50%, -60%) scale(0.8);
			}
			100% {
				opacity: 1;
				transform: translate(-50%, -50%) scale(1);
			}
		}
		
		@keyframes rainbowFlow {
			0%, 100% {
				background-position: 0% 50%;
			}
			50% {
				background-position: 100% 50%;
			}
		}
		
		@media screen and (max-width: 768px) {
			#mobileTextContainer {
				font-size: 3.4rem;
				line-height: 4.8rem;
				width: 95vw; /* 限制宽度防止换行 */
			}
			
			.mobile-text-line {
				white-space: nowrap; /* 防止自动换行 */
				overflow: hidden; /* 隐藏溢出 */
				text-overflow: ellipsis; /* 添加省略号（如果需要） */
			}
		}
		
		@media screen and (max-width: 480px) {
			#mobileTextContainer {
				font-size: 2.2rem;
				line-height: 3.6rem;
				width: 98vw; /* 小屏幕用更大宽度 */
			}
			
			.mobile-text-line {
				white-space: nowrap;
				overflow: visible; /* 小屏幕显示全部内容 */
			}
		}
    </style>
</head>
<body>
	<!-- 星空背景画布 -->
	<canvas id="starsCanvas"></canvas>
	<!-- 烟花背景画布 -->
	<canvas id="fireworksCanvas"></canvas>
	<!-- 文字粒子画布 -->
	<canvas id="myCanvas"></canvas>
	<!-- 移动端简化文字容器 -->
	<div id="mobileTextContainer">
		<span class="mobile-text-line">两周年里程碑</span>
		<span class="mobile-text-line">研发组祝有哥供应链</span>
		<span class="mobile-text-line">再攀高峰，共赢未来！</span>
	</div>
	<script type="text/javascript" src="js/particles.min.js"></script>
	<script type="text/javascript">
		// 移动设备检测
		const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
		const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent);
		const isSmallScreen = window.innerWidth <= 768;
		const isVerySmallScreen = window.innerWidth <= 480;
		
		// 根据设备调整性能参数
		const performanceConfig = {
			// 移动端使用简化模式（纯CSS文字效果）
			useMobileSimplified: isMobile,
			useSimpleEffects: isIOS,
			targetFPS: isMobile ? 30 : 60,
			
			// 粒子相关参数（大幅优化桌面端初始性能）
			starsCount: isMobile ? (isVerySmallScreen ? 20 : 30) : 25,   // 进一步减少星星数量
			particleCols: isMobile ? (isVerySmallScreen ? 150 : 200) : 180,  // 大幅减少粒子密度：300->180
			particleRows: isMobile ? (isVerySmallScreen ? 60 : 80) : 60,    // 大幅减少粒子密度：90->60
			fontSize: isMobile ? (isVerySmallScreen ? 68 : 82) : 130,       // 适度减小字体
			lineHeight: isMobile ? (isVerySmallScreen ? 78 : 92) : 150,     // 适度减小行高
			
			// 烟花参数（延迟启动，减少初期负载）
			fireworksInterval: isMobile ? 1200 : 1000,   // 增加间隔，减少密度
			maxParticles: isMobile ? 800 : 1000,         // 减少最大粒子数
			
			// 文字效果参数
			textFontSize: isMobile ? (isVerySmallScreen ? '3rem' : '4.5rem') : '8rem',
			textLineHeight: isMobile ? (isVerySmallScreen ? '3.5rem' : '5rem') : '9rem'
		};
		
		// 星空背景效果
		const starsCanvas = document.getElementById("starsCanvas");
		const starsCtx = starsCanvas.getContext("2d");
		starsCanvas.width = window.innerWidth;
		starsCanvas.height = window.innerHeight;

		class Star {
			constructor() {
				this.x = Math.random() * starsCanvas.width;
				this.y = Math.random() * starsCanvas.height;
				this.size = Math.random() * 2 + 0.5; // 增大星星尺寸
				this.alpha = Math.random() * 0.8 + 0.2; // 确保最低亮度
				this.twinkle = Math.random() * 0.03 + 0.01; // 增强闪烁效果
			}

			draw() {
				starsCtx.save();
				starsCtx.globalAlpha = this.alpha;
				
				// 增强发光效果
				const gradient = starsCtx.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.size * 4);
				gradient.addColorStop(0, "rgba(255,255,255,1)");
				gradient.addColorStop(0.3, "rgba(255,255,255,0.6)");
				gradient.addColorStop(1, "rgba(255,255,255,0)");
				starsCtx.fillStyle = gradient;
				starsCtx.beginPath();
				starsCtx.arc(this.x, this.y, this.size * 4, 0, Math.PI * 2);
				starsCtx.fill();
				
				// 星星核心
				starsCtx.fillStyle = "rgba(255,255,255,1)";
				starsCtx.beginPath();
				starsCtx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
				starsCtx.fill();
				starsCtx.restore();
			}

			update() {
				this.alpha += this.twinkle;
				if (this.alpha <= 0.2 || this.alpha >= 1) {
					this.twinkle = -this.twinkle;
				}
				this.draw();
			}
		}

		let stars = [];
		for (let i = 0; i < performanceConfig.starsCount; i++) {
			stars.push(new Star());
		}

		// 星空动画优化：渐进式启动
		let starsAnimationActive = false;
		
		function animateStars() {
			if (!starsAnimationActive) return; // 如果未激活则不渲染
			
			starsCtx.clearRect(0, 0, starsCanvas.width, starsCanvas.height);
			stars.forEach(star => star.update());
			requestAnimationFrame(animateStars);
		}
		
		// 快速启动星空动画
		setTimeout(() => {
			starsAnimationActive = true;
			animateStars();
			console.log('星空动画已启动');
		}, 200); // 200ms后启动星空动画

		window.addEventListener("resize", () => {
			starsCanvas.width = window.innerWidth;
			starsCanvas.height = window.innerHeight;
			stars = [];
			for (let i = 0; i < performanceConfig.starsCount; i++) stars.push(new Star());
		});
		
		// 火箭类：从底部上升后爆炸
		class Rocket {
			constructor(x, y, vx, vy, hue, system) {
				this.x = x;
				this.y = y;
				this.vx = vx;
				this.vy = vy;
				this.hue = hue;
				this.system = system;
				this.exploded = false;
				this.trail = [];
				// 桌面端减少轨迹长度提高性能
				this.maxTrail = performanceConfig.useMobileSimplified ? 8 : 5;
			}
			
			update() {
				// 记录轨迹
				this.trail.unshift({x: this.x, y: this.y});
				if (this.trail.length > this.maxTrail) this.trail.pop();
				
				this.vy += -this.system.GRAVITY * 0.4; // 上升受重力相反
				this.vx *= 0.998;
				this.x += this.vx;
				this.y += this.vy;
				
				// 触发爆炸条件
				if (this.vy >= -0.5 || Math.random() < 0.008 || this.y < this.system.canvas.height * 0.25) {
					this.exploded = true;
					this.system.explode(this.x, this.y, this.hue);
				}
			}
			
			draw(ctx) {
				// 桌面端简化绘制提高性能
				if (!performanceConfig.useMobileSimplified) {
					// 桌面端：简化轨迹绘制
					for (let i = 0; i < this.trail.length; i++) {
						const p = this.trail[i];
						const a = (1 - i / this.trail.length) * 0.7;
						ctx.beginPath();
						ctx.globalAlpha = a;
						ctx.fillStyle = this.system.hsl(this.hue, 100, 60);
						ctx.arc(p.x, p.y, 1.5 + i * 0.3, 0, Math.PI * 2);  // 减小轨迹尺寸
						ctx.fill();
					}
					// 简化的火箭头
					ctx.beginPath();
					ctx.globalAlpha = 1;
					ctx.fillStyle = this.system.hsl(this.hue, 100, 80);
					ctx.arc(this.x, this.y, 3, 0, Math.PI * 2);  // 减小火箭头尺寸
					ctx.fill();
					return;
				}
				
				// 移动端：完整效果
				// 绘制轨迹
				for (let i = 0; i < this.trail.length; i++) {
					const p = this.trail[i];
					const a = (1 - i / this.trail.length) * 0.9;
					ctx.beginPath();
					ctx.globalAlpha = a;
					ctx.fillStyle = this.system.hsl(this.hue, 100, 60);
					ctx.arc(p.x, p.y, 2 + i * 0.6, 0, Math.PI * 2);
					ctx.fill();
				}
				// 火箭头
				ctx.beginPath();
				ctx.globalAlpha = 1;
				ctx.fillStyle = this.system.hsl(this.hue, 100, 80);
				ctx.arc(this.x, this.y, 4, 0, Math.PI * 2);
				ctx.fill();
				
				// 火箭发光效果
				const glow = ctx.createRadialGradient(this.x, this.y, 0, this.x, this.y, 12);
				glow.addColorStop(0, `hsla(${this.hue},100%,80%,0.8)`);
				glow.addColorStop(1, 'rgba(0,0,0,0)');
				ctx.fillStyle = glow;
				ctx.arc(this.x, this.y, 12, 0, Math.PI * 2);
				ctx.fill();
			}
		}
		
		// 高级烟花粒子类
		class FireworkParticle {
			constructor(x, y, vx, vy, hue, size, life, system) {
				this.x = x;
				this.y = y;
				this.vx = vx;
				this.vy = vy;
				this.hue = hue;
				this.size = size;
				this.life = life;
				this.age = 0;
				this.alpha = 1;
				this.system = system;
			}
			
			update() {
				this.vx *= this.system.FRICTION;
				this.vy *= this.system.FRICTION;
				this.vy += this.system.GRAVITY;
				this.x += this.vx;
				this.y += this.vy;
				this.age++;
				this.alpha = Math.max(0, 1 - this.age / this.life);
			}
			
			draw(ctx) {
				// 桌面端优化：简化渲染避免卡顿
				if (!performanceConfig.useMobileSimplified) {
					// 桌面端：简化版本，只有主体和简单发光
					ctx.beginPath();
					ctx.globalAlpha = this.alpha;
					ctx.fillStyle = this.system.hsl(this.hue, 100, 60);
					ctx.globalCompositeOperation = 'source-over';
					ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
					ctx.fill();
					
					// 简单发光效果
					if (this.alpha > 0.3) {  // 只在粒子较亮时添加发光
						ctx.beginPath();
						ctx.globalAlpha = this.alpha * 0.3;
						ctx.fillStyle = this.system.hsl(this.hue, 100, 80);
						ctx.arc(this.x, this.y, this.size * 2, 0, Math.PI * 2);
						ctx.fill();
					}
					return;
				}
				
				// 移动端：完整发光效果
				const glow = ctx.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.size * 6);
				glow.addColorStop(0, `hsla(${this.hue},100%,70%,${this.alpha})`);
				glow.addColorStop(0.2, `hsla(${this.hue},100%,55%,${this.alpha * 0.8})`);
				glow.addColorStop(1, 'rgba(0,0,0,0)');
				
				ctx.beginPath();
				ctx.fillStyle = glow;
				ctx.globalCompositeOperation = 'lighter';
				ctx.arc(this.x, this.y, this.size * 3, 0, Math.PI * 2);
				ctx.fill();
				
				// 粒子主体
				ctx.beginPath();
				ctx.globalAlpha = this.alpha;
				ctx.fillStyle = this.system.hsl(this.hue, 100, 60);
				ctx.globalCompositeOperation = 'source-over';
				ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
				ctx.fill();
			}
		}
		
		// 烟花背景效果系统 - 高级版本
		class FireworksSystem {
			constructor() {
				this.canvas = document.getElementById('fireworksCanvas');
				this.ctx = this.canvas.getContext('2d');
				this.rockets = [];
				this.particles = [];
				
				// 参数配置
				this.GRAVITY = 0.06;
				this.FRICTION = 0.995;
				this.AUTO_INTERVAL = performanceConfig.fireworksInterval;  // 根据设备调整间隔
				this.MAX_PARTICLES = performanceConfig.maxParticles; // 根据设备调整最大粒子数
				
				// 状态控制
				this.isTextComplete = false;
				this.hasTriggeredCelebration = false;
				this.isDenseMode = false;
				
				this.initCanvas();
				this.animate();
				this.addMouseInteraction();
				// 立即启动基础烟花效果
				this.startBasicFireworks();
			}
			
			initCanvas() {
				this.canvas.width = window.innerWidth;
				this.canvas.height = window.innerHeight;
				
				window.addEventListener('resize', () => {
					this.canvas.width = window.innerWidth;
					this.canvas.height = window.innerHeight;
				});
			}
			
			// 辅助函数
			rand(min, max) {
				return Math.random() * (max - min) + min;
			}
			
			randInt(min, max) {
				return Math.floor(this.rand(min, max));
			}
			
			hsl(h, s = 100, l = 60) {
				return `hsl(${h},${s}%,${l}%)`;
			}
			
			// 新增：发射一排烟花的方法
			launchRowOfRockets() {
				// 桌面端密集烟花效果
				const rocketCount = performanceConfig.useMobileSimplified ? 
					(isVerySmallScreen ? 4 : 5) : 
					(performanceConfig.useSimpleEffects ? 4 : 7);  // 桌面端增加到7个
				const screenWidth = this.canvas.width;
				const spacing = screenWidth / (rocketCount + 1);
				
				for (let i = 0; i < rocketCount; i++) {
					setTimeout(() => {
						const x = spacing * (i + 1);
						const y = this.canvas.height + 10;
						const vx = this.rand(-0.8, 0.8);
						const vy = this.rand(-12, -15);
						const hue = this.randInt(0, 360);
						this.rockets.push(new Rocket(x, y, vx, vy, hue, this));
					}, i * (performanceConfig.useMobileSimplified ? 200 : 
						(performanceConfig.useSimpleEffects ? 150 : 100)));  // 桌面端缩短间隔
				}
				
				// 桌面端增加额外烟花
				const extraCount = performanceConfig.useMobileSimplified ? 
					(isVerySmallScreen ? 2 : 3) : 
					(performanceConfig.useSimpleEffects ? 1 : 3);  // 桌面端恢复到3个
				for (let i = 0; i < extraCount; i++) {
					setTimeout(() => {
						const x = this.rand(this.canvas.width * 0.1, this.canvas.width * 0.9);
						const y = this.canvas.height + 10;
						const vx = this.rand(-1.0, 1.0);
						const vy = this.rand(-13, -16);
						const hue = this.randInt(0, 360);
						this.rockets.push(new Rocket(x, y, vx, vy, hue, this));
					}, this.rand(100, 600));  // 缩短随机时间
				}
			}
			
			// 新增：文字完成后的庆祝烟花（增强版）
			startCelebration() {
				if (this.hasTriggeredCelebration) return;
				this.hasTriggeredCelebration = true;
				
				console.log('开始密集庆祝烟花！');
				
				// 立即发射一排烟花
				this.launchRowOfRockets();
				
				// 0.5秒后再发射一排
				setTimeout(() => {
					this.launchRowOfRockets();
				}, 500);
				
				// 1.2秒后开始密集模式
				setTimeout(() => {
					this.isDenseMode = true;
					// 密集间隔
					this.AUTO_INTERVAL = performanceConfig.useMobileSimplified ? 450 : 500;  // 更密集的间隔
					this.createDenseFireworks();
				}, 1200);
			}
			
			// 新增：密集烟花模式
			createDenseFireworks() {
				const baseInterval = this.AUTO_INTERVAL * (performanceConfig.useMobileSimplified ? 1.2 : 0.9);  // 桌面端更密集
				
				setInterval(() => {
					// 必定发射至少一个火箭
					this.launchRocket();
					
					// 桌面端密集模式
					if (!performanceConfig.useMobileSimplified) {
						// 桌面端：密集效果
						if (Math.random() < 0.5) {  // 50%概率额外发射
							setTimeout(() => this.launchRocket(), this.rand(50, 200));
						}
						
						if (Math.random() < 0.3) {  // 30%概率连续发射
							setTimeout(() => this.launchRocket(), this.rand(100, 250));
						}
						
						// 偶尔连续爆发
						if (Math.random() < 0.08) {  // 8%概率连续爆发
							for (let i = 0; i < 2; i++) {
								setTimeout(() => this.launchRocket(), this.rand(i*50, i*50+100));
							}
						}
					} else {
						// 移动端：保持原有频率
						if (Math.random() < 0.6) {  
							setTimeout(() => this.launchRocket(), this.rand(100, 250));
						}
						
						if (Math.random() < 0.35) {  
							setTimeout(() => this.launchRocket(), this.rand(150, 300));
						}
						
						if (Math.random() < 0.12) {  
							for (let i = 0; i < 2; i++) {
								setTimeout(() => this.launchRocket(), this.rand(i*80, i*80+120));
							}
						}
					}
				}, baseInterval);
			}
			
			// 启动基础烟花效果
			startBasicFireworks() {
				console.log('启动基础烟花效果');
				
				// 立即发射第一轮烟花
				setTimeout(() => {
					this.launchRocket();
				}, 100);
				
				setTimeout(() => {
					this.launchRocket();
				}, 400);
				
				setTimeout(() => {
					this.launchRocket();
				}, 800);
				
				// 启动持续的烟花效果
				setTimeout(() => {
					this.startContinuousFireworks();
				}, 1200);
			}
			
			// 启动持续烟花效果
			startContinuousFireworks() {
				const baseInterval = performanceConfig.fireworksInterval;
				
				setInterval(() => {
					this.launchRocket();
					
					// 随机额外发射
					if (Math.random() < 0.4) {
						setTimeout(() => this.launchRocket(), this.rand(100, 400));
					}
					
					// 偶尔连续发射
					if (Math.random() < 0.2) {
						setTimeout(() => this.launchRocket(), this.rand(200, 600));
					}
				}, baseInterval);
			}
			
			createFireworks() {
				// 空方法，现在使用startBasicFireworks
			}
			
			launchRocket() {
				const x = this.rand(this.canvas.width * 0.1, this.canvas.width * 0.9);
				const y = this.canvas.height + 10;
				const vx = this.rand(-1.2, 1.2);
				const vy = this.rand(-8.5, -11.5);
				const hue = this.randInt(0, 360);
				this.rockets.push(new Rocket(x, y, vx, vy, hue, this));
			}
			
			addMouseInteraction() {
				// 鼠标点击触发烟花
				this.canvas.addEventListener('click', (e) => {
					const rect = this.canvas.getBoundingClientRect();
					const x = e.clientX - rect.left;
					const y = e.clientY - rect.top;
					this.spawnAt(x, y);
				});
			}
			
			spawnAt(clientX, clientY) {
				// 从下方向点击位置发射火箭
				const x = this.rand(Math.max(50, clientX - 40), Math.min(this.canvas.width - 50, clientX + 40));
				const y = this.canvas.height + 10;
				const vx = (clientX - x) * 0.02 + this.rand(-0.5, 0.5);
				const vy = this.rand(-9.5, -13.5);
				const hue = this.randInt(0, 360);
				this.rockets.push(new Rocket(x, y, vx, vy, hue, this));
			}
			
			explode(x, y, hue) {
				// 根据设备类型调整粒子数量 - 桌面端密集效果
				let baseCount;
				if (performanceConfig.useMobileSimplified) {
					// 移动端：增加粒子数量让烟花更绚烂
					baseCount = isVerySmallScreen ? this.randInt(35, 50) : this.randInt(45, 65);
				} else if (performanceConfig.useSimpleEffects) {
					// iOS优化版本
					baseCount = this.randInt(25, 50);
				} else {
					// 桌面端密集版本（但优化渲染性能）
					baseCount = this.randInt(60, 100);  // 增加到60-100个粒子
				}
				
				for (let i = 0; i < baseCount; i++) {
					const angle = Math.random() * Math.PI * 2;
					const speedMultiplier = performanceConfig.useMobileSimplified ? 0.7 : 1;
					const speed = this.rand(1, 6.5) * (0.6 + Math.random() * 0.9) * speedMultiplier;
					const vx = Math.cos(angle) * speed;
					const vy = Math.sin(angle) * speed;
					const size = this.rand(1.2, 3.3);
					const life = performanceConfig.useMobileSimplified ? 
						this.randInt(30, 70) : this.randInt(40, 60);  // 桌面端缩短生命周期提高性能
					
					if (this.particles.length < this.MAX_PARTICLES) {
						this.particles.push(new FireworkParticle(
							x, y, vx, vy, 
							(hue + this.rand(-30, 30)) | 0, 
							size, life, this
						));
					}
				}
				
				// 移动端和桌面端都启用二次爆炸
				if (performanceConfig.useMobileSimplified) {
					// 移动端：适度的二次爆炸
					if (Math.random() < 0.15) {  // 15%概率二次爆炸
						setTimeout(() => {
							this.explode(
								x + this.rand(-15, 15), 
								y + this.rand(-15, 15), 
								hue + this.rand(-30, 30)
							);
						}, this.randInt(120, 200));
					}
				} else if (!performanceConfig.useSimpleEffects) {
					// 桌面端：密集的二次爆炸效果
					if (Math.random() < 0.18) {  // 恢复到18%概率
						setTimeout(() => {
							this.explode(
								x + this.rand(-15, 15), 
								y + this.rand(-15, 15), 
								hue + this.rand(-30, 30)
							);
						}, this.randInt(100, 200));  // 缩短延迟让效果更密集
					}
					
					// 适度的三次爆炸
					if (Math.random() < 0.05) {  // 恢复到5%概率
						setTimeout(() => {
							this.explode(
								x + this.rand(-20, 20), 
								y + this.rand(-20, 20), 
								(hue + 120) % 360
							);
						}, this.randInt(200, 300));  // 适中的延迟
					}
				}
			}
			
			animate() {
				// 完全清空画布，让星空背景透过显示
				this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
				
				// 背景微光点（少量随机星点）
				if (Math.random() < 0.03) {
					const sx = this.rand(0, this.canvas.width);
					const sy = this.rand(0, this.canvas.height * 0.6);
					this.ctx.beginPath();
					this.ctx.fillStyle = `rgba(255,255,255,${this.rand(0.02, 0.12)})`;
					this.ctx.arc(sx, sy, this.rand(0.3, 1.4), 0, Math.PI * 2);
					this.ctx.fill();
				}
				
				// 更新火箭
				for (let i = this.rockets.length - 1; i >= 0; i--) {
					const rocket = this.rockets[i];
					rocket.update();
					rocket.draw(this.ctx);
					if (rocket.exploded) {
						this.rockets.splice(i, 1);
					}
				}
				
				// 更新粒子
				for (let i = this.particles.length - 1; i >= 0; i--) {
					const particle = this.particles[i];
					particle.update();
					particle.draw(this.ctx);
					if (particle.age > particle.life || particle.alpha <= 0.01 || particle.y > this.canvas.height + 50) {
						this.particles.splice(i, 1);
					}
				}
				
				// 重置绘制状态
				this.ctx.globalAlpha = 1;
				this.ctx.globalCompositeOperation = 'source-over';
				
				requestAnimationFrame(() => this.animate());
			}
		}
		
		// 记录动画开始时间，用于渐进式加载
		window.animationStartTime = Date.now();
		
		// 添加性能监控
		let frameCount = 0;
		let lastTime = Date.now();
		let avgFPS = 60;
		
		function monitorPerformance() {
			frameCount++;
			const now = Date.now();
			if (now - lastTime >= 1000) { // 每秒计算一次FPS
				avgFPS = frameCount;
				frameCount = 0;
				lastTime = now;
				
				// 如果FPS太低，自动降级效果
				if (avgFPS < 20 && !isMobile) {
					console.log('检测到性能问题，自动降级效果');
					// 进一步减少星星数量
					if (stars.length > 15) {
						stars = stars.slice(0, 15);
					}
				}
			}
			requestAnimationFrame(monitorPerformance);
		}
		
		// 延迟启动性能监控，避免初期干扰
		setTimeout(monitorPerformance, 1000);
		
				// 初始化烟花系统
		const fireworksSystem = new FireworksSystem();
		
		// 立即启动烟花效果
		setTimeout(() => {
			fireworksSystem.startCelebration();
		}, 300);  // 页面加载后0.3秒就开始烟花
		
		// 扩展Particles类以支持文字模式
		function TextParticles(param) {
			var self = this;
			
			// 缓动函数
			var ease = param.ease || 'easeInOutExpo';
			
			//如果ease是不存在的缓动函数
			if(typeof window[ease] !== 'function') {
				console.log('the function is not existed, it will use easeInOutExpo instead');
				ease = 'easeInOutExpo';
			}
			
			// 初始化
			this.init = (function() {
				if(!param.canvasId || !document.getElementById(param.canvasId)){
					console.log('pls use the correct canvas id');
					return;
				}
				if(!param.text && !param.texts) {
					console.log('pls provide text content');
					return;
				}
				
				// 把canvas赋值给本身
				var canvas = {};
				canvas.self = document.getElementById(param.canvasId);
				
				// 判断支持画布上下文
				if(canvas.self.getContext) {
					// 保存canvas的信息
					canvas.w = canvas.self.width;
					canvas.h = canvas.self.height;
					canvas.ctx = canvas.self.getContext('2d');
					
					// 设置文字样式 - 增大字体
					var fontSize = param.fontSize || 120;
					var fontFamily = param.fontFamily || 'Microsoft YaHei, Arial, sans-serif';
					var fontWeight = param.fontWeight || 'bold';
					
					canvas.ctx.font = fontWeight + ' ' + fontSize + 'px ' + fontFamily;
					canvas.ctx.textAlign = 'center';
					canvas.ctx.textBaseline = 'middle';
					canvas.ctx.fillStyle = '#ffffff';  // 改为白色以便更好地检测像素
					
					// 处理多行文字
					var texts = param.texts || [param.text];
					var textX = param.textX || canvas.w / 2;
					var textY = param.textY || canvas.h / 2;
					var lineHeight = param.lineHeight || fontSize * 1.2;
					
					// 绘制所有行的文字到canvas
					var maxWidth = 0;
					var totalHeight = 0;
					
					for(var lineIndex = 0; lineIndex < texts.length; lineIndex++) {
						var currentY = textY + lineIndex * lineHeight;
						canvas.ctx.fillText(texts[lineIndex], textX, currentY);
						
						// 计算最大宽度和总高度
						var textMetrics = canvas.ctx.measureText(texts[lineIndex]);
						maxWidth = Math.max(maxWidth, textMetrics.width);
					}
					totalHeight = texts.length * lineHeight;
					
					// 获取所有文字区域的像素数据 - 扩大检测范围
					var textWidth = maxWidth;
					var textHeight = totalHeight;
					
					// 扩大采样区域 - 适应多行文字
					var padding = 80;
					var topY = textY - fontSize/2; // 第一行的顶部
					var bottomY = textY + (texts.length - 1) * lineHeight + fontSize/2; // 最后一行的底部
					var imageData = canvas.ctx.getImageData(
						Math.max(0, textX - textWidth/2 - padding), 
						Math.max(0, topY - padding), 
						Math.min(canvas.w, textWidth + padding * 2), 
						Math.min(canvas.h, (bottomY - topY) + padding * 2)
					);
					
					// 清空画布
					canvas.ctx.clearRect(0, 0, canvas.w, canvas.h);
					
					// 创建粒子数组
					self.array = [];
					
					// 解析像素数据创建粒子 - 提高采样密度
					var cols = param.cols || 300;  // 增加列数
					var rows = param.rows || 100;  // 增加行数
					var single_w = imageData.width / cols;
					var single_h = imageData.height / rows;
					
					var startX = Math.max(0, textX - textWidth/2 - padding);
					var startY = Math.max(0, topY - padding);
					
					for(var i = 0; i < cols; i++) {
						for(var j = 0; j < rows; j++) {
							var x = Math.floor(i * single_w);
							var y = Math.floor(j * single_h);
							var index = (y * imageData.width + x) * 4;
							
							// 检查像素是否有内容（alpha值大于128）
							if(imageData.data[index + 3] > 128) {
								// 使用暖色调系统，更易于阅读
								var colors = [
									'rgba(255, 215, 0, 1)',     // 金色
									'rgba(255, 255, 255, 1)',   // 白色
									'rgba(255, 140, 0, 1)',     // 橙色
									'rgba(255, 250, 205, 1)'    // 柠檬色
								];
								var particleColor = colors[Math.floor(Math.random() * colors.length)];
									
																	// 极速粒子激活：最小延迟让文字瞬间出现
								var progressiveDelay = Math.floor(j / 20) * 3 + Math.floor(i / 40) * 1; // 极小分组延迟
								var baseDelay = Math.floor(Math.random() * 5) + progressiveDelay; // 极小基础延迟
								
								self.array.push({
									x0: param.startX || canvas.w / 2,
									y0: param.startY || 50,
									x1: startX + x + (Math.random() - 0.5) * 6 * (param.particleOffset || 2),
									y1: startY + y + (Math.random() - 0.5) * 6 * (param.particleOffset || 2),
									originalX: startX + x, // 保存原始位置
									originalY: startY + y,
									fillStyle: particleColor, // 使用随机颜色
									delay: baseDelay,  // 使用渐进式延迟
									currTime: 0,
									count: 0,
									duration: parseInt((param.duration || 4000) / 16.66) + 1,
									interval: parseInt(Math.random() * 1 * (param.interval || 3)),  // 极小间隔，瞬间启动
									ease: ease,
									ratioX: param.ratioX || 1,
									ratioY: param.ratioY || 1,
									wavePhase: Math.random() * Math.PI * 2, // 波浪相位
									sparklePhase: Math.random() * 100, // 闪烁相位
									floatPhase: Math.random() * Math.PI * 2, // 漂浮相位
									glowPhase: Math.random() * Math.PI * 2, // 光晕相位
									explodePhase: Math.random() * Math.PI * 2, // 爆炸相位
									baseColor: particleColor, // 保存基础颜色
									explosionOffset: { x: 0, y: 0 }, // 爆炸偏移
									isExploding: false, // 是否处于爆炸状态
									isActive: false // 新增：粒子是否激活
								});
							}
						}
					}
					
					console.log('Created ' + self.array.length + ' particles');
					
					// 存储canvas引用
					self.canvas = canvas;
					
					// 全局爆炸控制
					self.globalExplosionTimer = 0;
					self.explosionCycle = 300; // 爆炸周期（帧数）
					self.explosionDuration = 60; // 爆炸持续时间（帧数）
				}
			})();
			
			// 动画方法
			this.animate = function() {
				if(self.array && self.array.length > 0) {
					self._render();
				}
			};
			
			// 渲染方法
			this._render = function() {
				// 清空画布
				self.canvas.ctx.clearRect(0, 0, self.canvas.w, self.canvas.h);
				
				var particles = self.array;
				var len = particles.length;
				var cur_particle = null;
				var cur_x, cur_y;
				var cur_time = 0, duration = 0, cur_delay = 0;
				var ratioX = 1, ratioY = 1;
				
				for(var i = 0; i < len; i++) {
					cur_particle = particles[i];
					
					// 快速激活：前0.3秒激活大部分粒子，让文字瞬间出现
					var currentTime = Date.now() - (window.animationStartTime || Date.now());
					if (!cur_particle.isActive) {
						if (currentTime < 300) { // 前0.3秒
							// 激活85%的粒子，让文字几乎瞬间出现
							if (Math.random() < 0.85) {
								cur_particle.isActive = true;
							} else {
								continue; // 跳过未激活的粒子
							}
						} else {
							// 0.3秒后激活所有粒子
							cur_particle.isActive = true;
						}
					}
					
					// 如果单位时间超过delay,开始
					if(cur_particle.count++ > cur_particle.delay) {
						// 设置画布的填充色
						self.canvas.ctx.fillStyle = cur_particle.fillStyle;
						
						//获取当前的time和持续时间和延时
						cur_time = cur_particle.currTime;
						duration = cur_particle.duration;
						cur_delay = cur_particle.interval;
						cur_particle.ratioX !== 1 ? ratioX = cur_particle.ratioX + Math.random()*2 : 1;
						cur_particle.ratioY !== 1 ? ratioY = cur_particle.ratioY + Math.random()*2 : 1;
						
														// 如果最后一个粒子动画也执行完了则停止动画并return
								if(particles[len - 1].duration + particles[len - 1].interval < particles[len - 1].currTime/2) {
									// 停止动画，绘制最终状态并添加动效
									for(var k = 0; k < len; k++) {
										var finalParticle = particles[k];
										
										// 非常温和的动画效果
										var time = Date.now() * 0.0005; // 进一步减慢动画速度
										
										// 极其轻微的波浪效果
										var waveX = finalParticle.originalX + Math.sin(time + finalParticle.wavePhase) * 0.3;
										var waveY = finalParticle.originalY + Math.cos(time * 0.15 + finalParticle.wavePhase) * 0.2;
										
										// 极轻微的呼吸效果
										var breathScale = Math.sin(time * 0.2 + finalParticle.floatPhase) * 0.05 + 1;
										
																			// 使用简单的金色
									var goldColor = 'rgba(255, 215, 0, 1)';
										
										// 稳定透明度
										var alpha = 1.0;
										
										// 大幅增大粒子大小使文字更清晰醒目
										var baseSize = 6.5; // 增大基础尺寸
										var sizeVariation = Math.sin(time * 0.3 + finalParticle.sparklePhase) * 0.2; // 减少大小变化
										var size = (baseSize + sizeVariation) * breathScale;
										
																			// 绘制主粒子 - 使用圆形，带金色发光效果
									// 先绘制发光效果
									var glowGradient = self.canvas.ctx.createRadialGradient(waveX, waveY, 0, waveX, waveY, size * 1.5);
									glowGradient.addColorStop(0, 'rgba(255, 215, 0, 0.8)');
									glowGradient.addColorStop(0.5, 'rgba(255, 215, 0, 0.4)');
									glowGradient.addColorStop(1, 'rgba(0, 0, 0, 0)');
									self.canvas.ctx.globalAlpha = 0.6;
									self.canvas.ctx.fillStyle = glowGradient;
									self.canvas.ctx.beginPath();
									self.canvas.ctx.arc(waveX, waveY, size * 1.5, 0, Math.PI * 2);
									self.canvas.ctx.fill();
									
									// 再绘制黑色描边
									self.canvas.ctx.globalAlpha = 0.3;
									self.canvas.ctx.fillStyle = 'rgba(0, 0, 0, 1)';
									self.canvas.ctx.beginPath();
									self.canvas.ctx.arc(waveX, waveY, size/2 + 0.5, 0, Math.PI * 2);
									self.canvas.ctx.fill();
									
									// 最后绘制金色主体
									self.canvas.ctx.globalAlpha = alpha;
									self.canvas.ctx.fillStyle = goldColor;
									self.canvas.ctx.beginPath();
									self.canvas.ctx.arc(waveX, waveY, size/2, 0, Math.PI * 2);
									self.canvas.ctx.fill();
									}
									// 继续动画以保持动效
									requestAnimationFrame(self._render);
									return;
								} else if(cur_time < duration + cur_delay){ 
									//如果当前时间大于延时
									if(cur_time >= cur_delay) {
										// 当前粒子正在动画
										// 计算出此刻x的坐标
										cur_x = window[cur_particle.ease]((cur_time - cur_delay)*ratioX, cur_particle.x0, (cur_particle.x1 - cur_particle.x0)*ratioX, duration);
										// 计算此刻y的坐标
										cur_y = window[cur_particle.ease]((cur_time - cur_delay)*ratioY, cur_particle.y0, (cur_particle.y1 - cur_particle.y0)*ratioY, duration);	
										
									// 简洁的运动轨迹效果
									var progress = (cur_time - cur_delay) / duration;
									
																	// 运动过程中的金色拖尾
								var time = Date.now() * 0.001;
								var trailAlpha = progress * 0.6;
								self.canvas.ctx.globalAlpha = trailAlpha;
								self.canvas.ctx.fillStyle = 'rgba(255, 165, 0, 0.8)'; // 金色拖尾
								self.canvas.ctx.beginPath();
								self.canvas.ctx.arc(cur_x, cur_y, 2.5, 0, Math.PI * 2);
								self.canvas.ctx.fill();
								
																// 绘制主粒子 - 使用金色，带发光效果
								var mainColor = 'rgba(255, 215, 0, 1)'; // 金色主粒子
								var mainSize = 5.5; // 增大主粒子大小
								
								// 桌面端也使用简化效果避免卡顿  
								if (!performanceConfig.useSimpleEffects && !isMobile) {
									// 桌面端也启用简化模式减少渲染负担
									// 只保留简单的发光效果
									var glowGradient = self.canvas.ctx.createRadialGradient(cur_x, cur_y, 0, cur_x, cur_y, mainSize);
									glowGradient.addColorStop(0, 'rgba(255, 215, 0, 0.6)');
									glowGradient.addColorStop(1, 'rgba(0, 0, 0, 0)');
									self.canvas.ctx.globalAlpha = 0.3;
									self.canvas.ctx.fillStyle = glowGradient;
									self.canvas.ctx.beginPath();
									self.canvas.ctx.arc(cur_x, cur_y, mainSize, 0, Math.PI * 2);
									self.canvas.ctx.fill();
								}
								// 简化版直接绘制主体
								
								// 绘制金色主体
								self.canvas.ctx.fillStyle = mainColor; 
								self.canvas.ctx.beginPath();
								self.canvas.ctx.arc(cur_x, cur_y, (mainSize-1)/2, 0, Math.PI * 2);
								self.canvas.ctx.fill();
									}
								} else {
									// 终点绘制在画布 - 稳定显示
									var time = Date.now() * 0.0005;
									var waveX = cur_particle.originalX + Math.sin(time + cur_particle.wavePhase) * 0.2;
									var waveY = cur_particle.originalY + Math.cos(time * 0.15 + cur_particle.wavePhase) * 0.15;
									
																									// 桌面端简化彩色系统减少计算
								var hue = (time * 30 + cur_particle.wavePhase * 5) % 360; // 减少变化频率
								var saturation = 80; // 固定饱和度减少计算
								var lightness = 65; // 固定亮度减少计算
								
								// 简化HSL颜色
								var dynamicColor = `hsl(${hue}, ${saturation}%, ${lightness}%)`;
									
								// 稳定透明度
								self.canvas.ctx.globalAlpha = 1.0;
								self.canvas.ctx.fillStyle = dynamicColor;
									
								// 适中的粒子大小
								var size = 5.5;
								
								// 简化发光效果（桌面端也用简化版）
								if (!isMobile) {
									var glowGradient = self.canvas.ctx.createRadialGradient(waveX, waveY, 0, waveX, waveY, size);
									glowGradient.addColorStop(0, dynamicColor.replace('hsl', 'hsla').replace(')', ', 0.5)'));
									glowGradient.addColorStop(1, 'rgba(0, 0, 0, 0)');
									self.canvas.ctx.globalAlpha = 0.4;
									self.canvas.ctx.fillStyle = glowGradient;
									self.canvas.ctx.beginPath();
									self.canvas.ctx.arc(waveX, waveY, size, 0, Math.PI * 2);
									self.canvas.ctx.fill();
								}
								
								// 直接绘制彩色主体（取消描边减少渲染）
								self.canvas.ctx.globalAlpha = 1.0;
								self.canvas.ctx.fillStyle = dynamicColor;
								self.canvas.ctx.beginPath();
								self.canvas.ctx.arc(waveX, waveY, size/2, 0, Math.PI * 2);
								self.canvas.ctx.fill();
								}
						//当前时间++
						cur_particle.currTime++;
					}
				}
				
				// 继续动画
				requestAnimationFrame(self._render);
			};
		}
		
		/*
		 * parameters for TextParticles
		 * canvasId: 画布id，必填
		 * text: 要显示的文字，必填
		 * fontSize: 字体大小，默认120
		 * fontFamily: 字体，默认'Microsoft YaHei, Arial, sans-serif'
		 * fontWeight: 字重，默认'bold'
		 * textX/textY: 文字中心位置
		 * cols/rows：分别代表文字区域每一行和每一列的采样密度
		 * startX/startY: 粒子起始位置x,y  
		 * delay: 延迟执行动画时间，单位ms
		 * duration: 持续时间，单位ms
		 * fillStyle: 粒子颜色值，可带半透明
		 * particleOffset：粒子偏移值
		 * ease: 缓动函数
		 * interval: 粒子间开始移动间隔
		 * ratioX/ratioY x,y轴位移比率 
		 */
		// 动态设置canvas尺寸
		const myCanvas = document.getElementById('myCanvas');
		const canvasWidth = isMobile ? window.innerWidth : 2400;
		const canvasHeight = isMobile ? window.innerHeight : 700;
		myCanvas.width = canvasWidth;
		myCanvas.height = canvasHeight;
		
		// 计算文字位置（居中）
		const textX = canvasWidth / 2;
		// 移动端多行文字需要更靠上的位置
		const textY = isMobile ? canvasHeight * 0.3 : 250;
		const startX = textX;
		const startY = isMobile ? (canvasHeight * 0.05) : 50;
		
		
		// 移动端简化版本逻辑
		if (performanceConfig.useMobileSimplified) {
			// 移动端：显示CSS文字效果，隐藏canvas
			console.log('使用移动端简化版本');
			document.getElementById('myCanvas').style.display = 'none';
			document.getElementById('mobileTextContainer').style.display = 'block';
			
			// 动态设置移动端文字内容 - 固定三行
			const mobileContainer = document.getElementById('mobileTextContainer');
			const mobileTexts = isVerySmallScreen ? 
				['两周年里程碑', '研发组祝有哥供应链', '再攀高峰，共赢未来！'] : 
				['两周年里程碑', '研发组祝有哥供应链', '再攀高峰，共赢未来！'];
			
			// 清空现有内容并重新填充
			mobileContainer.innerHTML = '';
			mobileTexts.forEach(text => {
				const span = document.createElement('span');
				span.className = 'mobile-text-line';
				span.textContent = text;
				mobileContainer.appendChild(span);
			});
			
							// 移动端简化版本，烟花已在全局启动，无需重复启动
			
		} else {
			// 桌面端：使用原有的粒子效果
			console.log('使用桌面端粒子效果');
			document.getElementById('mobileTextContainer').style.display = 'none';
			
			// 根据屏幕大小选择文字排版
			const displayTexts = ['两周年里程碑', '研发组祝有哥供应链', '再攀高峰，共赢未来！'];
			
			var particles = new TextParticles({
				canvasId: 'myCanvas',
				texts: displayTexts,
				fontSize: performanceConfig.fontSize,
				fontFamily: 'Microsoft YaHei, PingFang SC, Arial, sans-serif',
				fontWeight: '900',
				textX: textX,
				textY: textY,
				lineHeight: performanceConfig.lineHeight,
				cols: performanceConfig.particleCols,
				rows: performanceConfig.particleRows,
				startX: startX,
				startY: startY,
				delay: 50,        // 极小延迟，让粒子瞬间启动
				duration: 2000,   // 缩短持续时间，让文字更快稳定
				interval: 3,      // 极小间隔，瞬间启动效果
				fillStyle: 'rgba(255, 215, 0, 1)',
				particleOffset: 2,
				ease: 'easeInOutExpo'
			});
			particles.animate();
			
			// 桌面端粒子效果，烟花已在全局启动，无需重复启动
		}
		
		// 处理移动设备的屏幕旋转和尺寸变化
		window.addEventListener('resize', () => {
			if (performanceConfig.useMobileSimplified) {
				// 移动端简化版本：只需要调整CSS文字大小和烟花canvas
				setTimeout(() => {
					// 更新烟花canvas尺寸
					const fireworksCanvas = document.getElementById('fireworksCanvas');
					const starsCanvas = document.getElementById('starsCanvas');
					fireworksCanvas.width = window.innerWidth;
					fireworksCanvas.height = window.innerHeight;
					starsCanvas.width = window.innerWidth;
					starsCanvas.height = window.innerHeight;
					
					console.log('移动端简化版本尺寸调整完成');
				}, 100);
			} else if (isMobile) {
				// 移动端粒子版本：需要重新加载
				setTimeout(() => {
					location.reload();
				}, 100);
			}
		});
		
		// 移动端性能优化
		if (performanceConfig.useMobileSimplified) {
			console.log('应用移动端性能优化');
			
			// 简化版本不需要复杂的帧率控制
			// 主要依靠CSS动画和简化的烟花效果
			
			// 为移动端添加额外的性能优化样式
			const mobileStyle = document.createElement('style');
			mobileStyle.textContent = `
				/* 移动端性能优化 */
				#fireworksCanvas, #starsCanvas {
					transform: translateZ(0);
					backface-visibility: hidden;
					will-change: auto; /* 让浏览器自动决定优化策略 */
				}
				
				/* 确保文字动画流畅 */
				.mobile-text-line {
					will-change: background-position, transform;
					transform: translateZ(0);
				}
			`;
			document.head.appendChild(mobileStyle);
			
		} else if (isMobile) {
			// 非简化移动端：帧率限制
			let lastFrame = 0;
			const targetFPS = performanceConfig.targetFPS;
			const interval = 1000 / targetFPS;
			
			const originalRAF = window.requestAnimationFrame;
			window.requestAnimationFrame = function(callback) {
				const now = Date.now();
				if (now - lastFrame >= interval) {
					lastFrame = now;
					return originalRAF(callback);
				} else {
					return setTimeout(() => originalRAF(callback), interval - (now - lastFrame));
				}
			};
		}
		
		// 桌面端性能优化：添加帧率控制避免初期卡顿
		if (!isMobile) {
			console.log('应用桌面端性能优化');
			let lastFrame = 0;
			const targetFPS = 45; // 桌面端限制为45fps，避免过度渲染
			const interval = 1000 / targetFPS;
			
			const originalRAF = window.requestAnimationFrame;
			window.requestAnimationFrame = function(callback) {
				const now = Date.now();
				if (now - lastFrame >= interval) {
					lastFrame = now;
					return originalRAF(callback);
				} else {
					return setTimeout(() => originalRAF(callback), interval - (now - lastFrame));
				}
			};
		}
	</script>
</body>
</html>
